<template>
  <el-card>
    <template #header>
      <el-row :gutter="10" style="float: right">
        <el-button @click="emit('addDataSet')" type="primary">新 增</el-button>
        <el-button @click="deleteRow" :icon="Delete" type="danger" plain
          >删 除</el-button
        >
      </el-row>
    </template>
  </el-card>
  <el-scrollbar :height="h">
    <ts-card header="数据集列表" style="margin-top: 10px">
      <el-table
        ref="table"
        :data="dataList"
        height="600"
        @select="selectRow"
        @select-all="selectAll"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="id"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="flexColumnWidth" label="是否自动计算列宽"></el-table-column>
        <el-table-column prop="stripe" label="是否为斑马线"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="edit(scope)"
              >修 改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </ts-card>
  </el-scrollbar>
</template>
  <script setup>
import { ref, defineModel, onMounted, computed, nextTick } from "vue";
import { Plus, Delete, DCaret, Edit } from "@element-plus/icons-vue";
import { ElMessageBox,ElMessage } from "element-plus";
import API from "@/api/model/report.js";
const emit = defineEmits(["toDetail", "addDataSet", "delete"]);
const h = computed(() => {
  var elementHeight = document.querySelector(".el-main").offsetHeight;
  return elementHeight + "px";
});
const props = defineProps({
  fileName: { type: String, default: "" },
  tableId: { type: String, default: "" },
});
const table = ref(null);
const toggleIndex = ref(0);
const dataList = defineModel();
const deleteList = ref([]);
onMounted(() => {});
const edit = (scope) => {
  emit("toDetail", scope.row);
};
const selectRow = (rows, row) => {
    deleteList.value = rows;
};
const selectAll = (rows) => {
  deleteList.value = rows;
};
const deleteRow = async () => {
  if (deleteList.value.length > 0) {
    let param = {
      fileName: props.fileName,
      dataList: deleteList.value.map((ele) => {
        return ele.id;
      }),
    };
    ElMessageBox.confirm("确定删除吗？", "提示", {
      type: "warning",
      confirmButtonText: "确定",
      confirmButtonClass: "el-button--danger",
    })
      .then(() => {
        let res = API.deleteDataSet.post(param);
        if (res.code == 200) {
          emit("delete");
        }
      })
      .catch(() => {});
  } else {
    ElMessage({
      message: "请选择表格记录",
      type: "warning",
    });
  }
};
</script>
  <style lang="less" scoped></style>